<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>

<style type="text/css">
	#wapper {
      	width:988px;
      	height:auto;
      	overflow: auto;
      	position:relative;
      	background:#ccc;
      	border:1px solid #ddd;
      	left:20%;
      	margin-top:100px;
      	font: 100;
      	
	}
	
	#wapper input{
		border:1px solid #ccc;
		padding:5px 5px;
		margin:5px 5px;
		line-height: 20px;
	}
	
	.error{
		color:red;
		font-size:14px;
		line-height: 20px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  

<script type="text/javascript">

    $(document).ready(function(){
    	
    	$("#register").bind("click",register);
    })
    
    function register(){
    	var username = $("#register_form input[type=text][name=username]").val();
    	var password = $("#register_form input#password").val();
    	var repassword = $("#register_form input#repassword").val();
    	
    	$("#register_form .error").html();
    	if(""==username){
    		$("#register_form span:eq(0)").text("用户名不可以为空！");
    		$("#register_form input[type=text][name=username]").focus();
    		return false;
    	}else if(username.length<6){
    		$("#register_form span:eq(0)").text("用户名不可以少于6个字符！");
    		$("#register_form input[type=text][name=username]").focus();
    		return false;
    	}else if(""==password){
    		$("#register_form span:eq(1)").text("密码不可以为空！");
    		$("#register_form input#password").focus();
    		return false;
    	}else if(password!=repassword){
    		$("#register_form span:eq(2)").text("密码不一致，请重新输入！");
    		return false;
    	}else{
    		username = encodeURIComponent(username);
    		password = encodeURIComponent(password);
    		
    		var params = {};
    		params["username"] = username;
    		params["password"] = password;
    		
    		$.post("register.do",params,function(data){
    			if(data.result){
    				$("#return_result").html("注册成功！");
    			}else{
    				$("#return_result").html("注册失败！");
    			}
    			
    		})
    	}
    	
    }
</script>
</head>
<body>
	<div id="wapper">
		<div id="register_div">
			<form action="register.do" method="post" id="register_form">
				<label for="username">用户名  ：</label> <input id="username" type="text" name="username"/><span class="error"></span></br>
				<label for="password">密码 ：&nbsp;&nbsp;&nbsp;</label><input id="password" type="password" name="password"/><span class="error"></span></br>
				<label for="repassword">确认密码：</label><input id="repassword" type="password"/><span class="error"></span></br>
				<input type="button" id="register" value="注册"/>&nbsp;&nbsp;
				<input type="reset" value="重置"/>
			</form>
			
			<div id="return_result"></div>
		</div>
	</div>
</body>
</html>